<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .bubble{
        position:absolute;
    }
    .bubble:hover{
        transform: scale(1.5);
    }
    #container{
        position:relative;
    }
</style>
<body>
    <canvas id="canvas"></canvas>
    <div id="container"></div>
    <script>
        let canvas=document.getElementById('canvas');
        let ctx=canvas.getContext('2d');

        let image=new Image();
        image.src='./image/dragon.jpeg';
        image.onload=function(){
            canvas.width=image.width;
            canvas.height=image.height;
            ctx.drawImage(image,0,0)
            // getLattice();
            getLatticeBubble();
        }
        //获取图片的点阵信息，并生成点阵
        function getLattice(){
            let imageData=ctx.getImageData(0,0,image.width,image.height).data;
            console.log(imageData)
            ctx.fillStyle='#ffffff'
            ctx.fillRect(0,0,image.width,image.height);

            let gap=6; //目的，降低精度，每隔6个单位取一个像素
            for(let h=0;h<image.height;h+=gap){
                for(let w=0;w<image.width;w+=gap){
                    /*
                    h+1代表第几行 w+1代表当前行的第几个 前进一个像素是加四，比如 第一行第一个是0 第一行第二个应该是4，
                    每行最多有image.width个数 所以当前位置的数是前面行数数字之和image.width*(h-1)*4 加上当前行步数(w+1)*4
                    */
                    let position=(image.width * h + w) * 4 ;//
                    let r=imageData[position];
                    let g=imageData[position+1];
                    let b=imageData[position+2];
                    console.log(position)
                    if(r+g+b==0){  //判断是否是黑色#000
                        ctx.fillStyle='#000';
                        ctx.fillRect(w,h,4,4)
                    }
                }
            }
        }

        //通过点阵信息生成对应的气泡div
        function getLatticeBubble(){
            let imageData=ctx.getImageData(0,0,image.width,image.height).data;
            console.log(imageData)
            ctx.fillStyle='#ffffff'
            ctx.fillRect(0,0,image.width,image.height);

            let gap=6; //目的，降低精度，每隔6个单位取一个像素

            let dragonContainer = document.getElementById("container");
            let dragonScale = 2;

            for(let h=0;h<image.height;h+=gap){
                for(let w=0;w<image.width;w+=gap){
                    let position = (image.width * h + w) * 4;
                    let r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];

                    if(r+g+b==0){
                        let bubble = document.createElement("img");
                        bubble.src = "./image/bubble.jpeg";
                        bubble.setAttribute("class","bubble");

                        let bubbleSize = Math.random()*10+10;
                        bubble.style.left = (w*dragonScale-bubbleSize/2) + "px";
                        bubble.style.top = (h*dragonScale-bubbleSize/2) + "px";
                        bubble.style.width = bubble.style.height = bubbleSize+"px";
                        bubble.style.animationDuration = Math.random()*6+4 + "s";

                        dragonContainer.appendChild(bubble);
                    }
                }
            }
        }
        
    </script>
</body>
</html>